import styles from "./index.less"
import {BorderBox8} from '@jiaminghi/data-view-react'
import {useRef, useEffect, useState} from "react"
import * as echarts from "echarts";
import 'echarts-wordcloud'

const Serve = () => {
    const mock=[
        {"name": "FTP"},
        {"name": "Telnet"},
        {"name": "SSH"},
        {"name": "SMTP"},
        {"name": "Message transfer agent(MTA)-X.400 over TCP/IP"},
        {"name": "Post Office Protocol -Version3"},
        {"name": "Network News Transfer Protocol"},
        {"name": "Location Service"},
        {"name": "NETBIOS Name Service"},
        {"name": "SNMP"},
        {"name": "X Display Manager Control Protocol"},
        {"name": "LDAP"},
        {"name": "ILS"}
    ]
   const filterName=(names)=> {
        return names.map(function(item) {
            if (item.name.length > 10) {
                return { name: item.name.substring(0, 6) + "..." };
            } else {
                return item;
            }
        });
    }
    const [data, setData] = useState(filterName(mock))
    const serveRef = useRef(null)
    useEffect(() => {
        const myChart = echarts.init(serveRef.current);
        data.forEach(item => {
            item.textStyle = {
                color: '#73F8FA',
                lineHeight: 12,
                backgroundColor: 'rgba(115, 248, 250, 0.2)',
                padding: 8,
                borderRadius: 4,
                fontSize: 15,
                // fontFamily:'MyFont'
            }
        })
        let option;
        option = {

            series: [{
                formatter: function (params) {
                    var size = params.value[2] / 10;
                    return '<div style="background-color: #0077FF; width: 100px; height: 100px; border-radius: 50%; text-align: center; line-height: 100px; font-size: ' + size + 'px; color: #FFFFFF;">' + params.value[0] + '</div>';
                },
                type: "wordCloud",
                // 网格大小，各项之间间距
                gridSize: 25,
                // 形状 circle 圆，cardioid  心， diamond 菱形，
                // triangle-forward 、triangle 三角，star五角星
                shape: 'triangle',
                // 字体大小范围
                sizeRange: [12, 12],
                // 文字旋转角度范围
                rotationRange: [0, 0],
                // 旋转步值
                // rotationStep: 90,
                // 自定义图形
                // maskImage: maskImage,
                //
                left: null,
                right: null,
                bottom: null,
                top: 15,
                // 画布宽
                width: '95%',
                // 画布高
                height: '100%',
                // 是否渲染超出画布的文字
                drawOutOfBound: false,

                // textStyle: {
                //     color: '#73F8FA',
                //     lineHeight: 12,
                //     backgroundColor: 'rgba(115, 248, 250, 0.2)',
                //     padding: 6,
                //     borderRadius: 4,
                //     fontSize: 20
                // },
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#000000',
                },
                data: data
            }]
        };
        option && myChart.setOption(option);
        window.addEventListener('resize', () => {
            myChart.resize()
        })
    }, [])
    return (
        <div className={styles.container}>
            <BorderBox8 dur={6}>
                <div className={styles.content}>
                    <div className={styles.top}>
                        <div className={styles.EnTitle}>High risk services</div>
                        <div className={styles.ChTitle}>高危服务</div>
                    </div>
                    <div className={styles.server} ref={serveRef}></div>
                </div>
            </BorderBox8>
        </div>
    )
}
export default Serve